<template>
  <div>
    <div style="padding-top: 55px">
    </div>
    <!-- 右侧区域 -->
    <div class="bg-light">
      <!-- 上方导航栏 -->
      <nav class="nav border-bottom shadow-sm" style="background-color: #4b5162">
        <a class="btn tab" @click="handleUpload" :style="{ 'color': 'white' }">
          <i class="fa fa-share" aria-hidden="true"></i> 上传
        </a>
      </nav>

      <!-- 中心区域 -->
      <div class="bg-light text-left" style="overflow: auto; height: calc(100vh - 100px); margin: 10px">
        <p class="text-center" v-if="images.length < 1">
          无图片
        </p>
        <!-- 图片 -->
        <div v-else>
          <!-- <Pagination :pages="pages" @pagechange="updatePage" /> -->
          <div class="row">
            <EnhanceImageCard v-for="image in images" :key="image.id" :image="image" />
          </div>
          <Pagination :pages="pages" @pagechange="updatePage" />
        </div>
      </div>
    </div>

    <!-- 上传图片 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="pictureUpload">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">上传图片</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="picture">图片文件 (.jpg .png)</label>
                <input type="file" class="form-control-file" id="picture" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="uploadPicture">
              上传
            </button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import toastrs from "@/mixins/toastrs";
import Dataset from "@/models/datasets";
import Export from "@/models/exports";
import EnhanceImageCard from "@/components/cards/EnhanceImageCard";
import Pagination from "@/components/Pagination";
import PanelString from "@/components/PanelInputString";
import PanelToggle from "@/components/PanelToggle";
import JQuery from "jquery";
import TagsInput from "@/components/TagsInput";

// import { mapMutations } from "vuex";

let $ = JQuery;

export default {
  name: "Enhancement",
  components: {
    EnhanceImageCard,
    Pagination,
    PanelString,
    PanelToggle,
    TagsInput,
  },
  mixins: [toastrs],

  data() {
    return {
      pages: 1,
      generateLimit: 100,
      limit: 52,
      imageCount: 0,
      prompt_input: "",
      images: [
        { id: 1, file_name: "car01", url: "https://bestlifeonline.com/wp-content/uploads/sites/3/2019/01/shutterstock_691724566.jpg"},
        { id: 2, file_name: "car02", url: "https://bestlifeonline.com/wp-content/uploads/sites/3/2019/01/shutterstock_691724566.jpg"},
        { id: 3, file_name: "car03", url: "https://bestlifeonline.com/wp-content/uploads/sites/3/2019/01/shutterstock_691724566.jpg"},
        { id: 4, file_name: "car04", url: "https://bestlifeonline.com/wp-content/uploads/sites/3/2019/01/shutterstock_691724566.jpg"}
      ],
    };
  },
  methods: {
    updatePage(page) {
      Dataset.getData()
        .then((response) => {
        })
        .catch((error) => {
          this.axiosReqestError("loading pictures", error.response.data.message);
        })
    },
    handleUpload() {
      $("#pictureUpload").modal("show");
    },
    uploadPicture() {
      let uploaded = document.getElementById("picture");

      Dataset.uploadCoco()
        .then((response) => {
        })
        .catch((error) => {
          this.axiosReqestError("upload picture", error.response.data.message);
        })
    },
    downloadExport(id) {
      Export.download(id, this.dataset.name);
    },
  },
};
</script>

<style scoped>
.breadcrumb {
  padding: 0px;
  margin: 5px 0;
}

.btn-link {
  padding: 0px;
}

.sidebar .title {
  color: white;
}

.progress {
  padding: 2px;
  height: 24px;
}

.sidebar {
  height: 100%;
  position: fixed;
  color: white;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #4b5162;
  overflow-x: hidden;
  padding-top: 60px;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidebar-title {
  color: white;
}

.sidebar-section-buttons {
  margin: 5px;
}

.sidebar-section {
  margin: 5px;
  border-radius: 5px;
  background-color: #383c4a;
  padding: 0 5px 2px 5px;
  overflow: auto;
}
</style>./Enhancement.vue
